<template>
  <div class="friends My">
    <!-- 我的资料 -->
    <div class="my_Translation">
      <div class="my_avatar">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1040943398,1147003181&fm=26&gp=0.jpg" alt="">
      </div>
      <div class="my_information">
        <p class="my_acount" v-if="userData.name == null">游客</p>
        <p class="my_acount" v-else>{{userData.name}}</p>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="orders_list">
      <!-- 我的订单 -->
      <a href="#/My/my_orders" class="my_orders">
        <p class="orders_right">我的订单</p>
        <p class="orders_left">全部订单 ></p>
      </a>
      <!-- 订单宫格 -->
      <van-grid>
        <van-grid-item icon="paid" text="待付款" />
        <van-grid-item icon="credit-pay" text="待收货" />
        <van-grid-item icon="todo-list-o" text="待评价" />
        <van-grid-item icon="send-gift-o" text="退货/退款" />
      </van-grid>
    </div>
    <div class="my_orders2">
      <!-- 我的收藏 -->
      <van-grid class="my_collection" direction="horizontal" :column-num="1">
        <van-grid-item icon="star-o" text="我的收藏" />
        <div class="collection_left">></div>
      </van-grid>
      <!-- 我的收货地址 -->
      <a href="#/My/my_address">
        <van-grid class="my_collection" direction="horizontal" :column-num="1">
          <van-grid-item icon="cart-o" text="我的收货地址" />
          <div class="collection_left">></div>
        </van-grid>
      </a>
      <!-- 我的购物车 -->
      <a href="#/My/cart">
        <van-grid class="my_collection my_collection3" direction="horizontal" :column-num="1">
          <van-grid-item icon="cart-o" text="我的购物车" />
          <div class="collection_left">></div>
        </van-grid>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.userData = JSON.parse(sessionStorage.getItem('userinfo') || '[]')
  },
  data() {
    return {
      userData: []
    }
  }
}
</script>

<style lang="scss">
.My{
  width: 100%;
  height: 100%;
  background: #eee;
}
  .friends{
    .my_Translation{
      height: 112px;
      width: 100%;
      background: url(http://vivo.findtalk.cn/static/img/bj.png) no-repeat center/100% 100%;
      display: flex;
      align-items: center;
      padding: 0px 20px;
      box-sizing: border-box;
      .my_avatar{
        margin-right: 20px;
        img{
          width: 62px;
          height: 63px;
          border-radius: 50%;
        }
      }
      .my_information{
        color: #fff;
        font-size: 16px;
      }
    }
    .orders_list{
      background: #fff;
      margin: 5px 0px;
      .my_orders{
        width: 100%;
        height: 56px;
        font-size: 16px;
        display: flex;
        padding: 0px 20px;
        box-sizing: border-box;
        justify-content: space-between;
        color: black;
      }
      .van-grid{
        color: skyblue;
        .van-grid-item__icon {
          font-size: 38px;
        }
      }
    }
    .my_orders2{
      .my_collection{
        background: white;
        display: flex;
        padding: 0px 10px;
        box-sizing: border-box;
        .van-grid-item{
          flex-basis: 92% !important;
        }
        .van-grid-item__content{
          width: 260px;
          border: none;
          display: flex;
          justify-content: flex-start;
          .van-icon-star-o{
            font-size: 22px;
          }
          .van-grid-item__text{
            font-size: 16px;
          }
          .van-icon-cart-o:before {
            font-size: 22px;
          }
        }
        .collection_left{
          width: 28px;
          height: 58px;
          text-align: center;
          line-height: 58px;
          font-size: 24px;
        }
      }
      .van-grid-item__content::after {
        z-index: 1;
        border-width: 0 0 0 0;
      }
    }
  }
</style>